.task-box-shadow {
  box-shadow: 1Px 1Px 10Px #DCDFE6;
  -moz-box-shadow: 1Px 1Px 10Px #DCDFE6;
  -webkit-box-shadow: 1Px 1Px 10Px #DCDFE6;
}

.task-index {
  display: flex;
  flex-direction: column;
  width: 100%;
  -webkit-overflow-scrolling: touch;

  .task-head {
    width: 100%;

    .task-con {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      background-color: #FFFFFF;
      margin: 14PX 12PX;
      border-radius: 5PX;
      .task-box-shadow();

      .task-info-con {
        display: flex;
        flex-grow: 1;
        flex-direction: row;
        justify-content: flex-start;

        .info-con {
          display: flex;
          margin-top: 12PX;
          margin-right: 12px;
          width: 100%;
          flex-direction: column;
          justify-content: flex-start;

          .title-con {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;

            .task-title {
              flex-grow: 1;
              font-size: 14PX;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }


          }

          .task-money-con {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: baseline;
            .task-permoney {
              margin-top:10PX;
              display: flex;
              flex-direction: row;
              flex-grow:1;
              justify-content: flex-start;
              align-items: center;
            }
            .task-info-click {
              font-size: 18PX;
              color: #151515;
            }
          }


          .task-payment {
            width: 100%;
            margin-top: 14PX;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;

            .payment-status {
              border-radius: 15PX;
              margin-left: 13PX;
              font-size: 13PX;
              color: #ffffff;
              width: 70PX;
              text-align: center;
              height: 20PX;
              line-height: 20PX;
            }

            .fx-color {
              background-color: #D733F2;
            }

            .yy-color {
              background-color: #FF4F30;
            }

            .cj-color {
              background-color: #FF2B94;
            }

            .task-commison {
              display: flex;
              flex-direction: row;
              justify-content: flex-end;
              align-items: center;
              flex-grow: 1;
            }
          }
        }
      }
    }
  }

  .task-warning {
    width: 100%;

    .warning-con {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0 12PX;
      margin-top: 10PX;

      .warning-info-img {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

      }

      .warning-info-font {
        height: 100%;
        margin-left: 6Px;
        font-size: 10Px;
        color: rgba(255, 35, 35, 0.80);
      }
    }
  }

  .task-payment {
    width: 100%;
    display: flex;
    flex-direction: column;

    .payment-con {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: 14PX 12PX;

      .payment-title {
        font-weight: bold;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }

      .paymeny-status {
        margin-top: 6PX;
        width: 100%;
        height: 88PX;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        background-color: #ffffff;

        .status-con {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .status-title {
            margin-top: 5Px;
            font-size: 9Px;
          }

          .status-kb {
            color: #B99BFE;
          }

          .status-dd {
            color: #FAA24B;
          }

          .status-cj {
            color: #FF5252;
          }

          .status-default {
            color: #999999;
          }
        }
      }
    }
  }

  .task-requirements {
    margin-top: 10PX;
    width: 100%;
    display: flex;
    flex-direction: column;


    .requirements-con {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: 0 12PX;


      .requirements-title {
        font-weight: bold;
        font-size: 14Px;
        color: #333333;
        line-height: 20px;
      }

      .requirements-entry {
        width: 100%;
        margin-top: 10PX;
        background-color: #FFFFFF;
        border-radius: 5PX;
        .task-box-shadow();

        .entry-record {
          display: flex;
          margin: 12PX;
          flex-direction: column;
          justify-content: flex-start;
          font-size: 14PX;
        }
      }
    }
  }

  .task-phone {
    width: 100%;
    display: flex;
    margin-top: 12PX;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 50PX;


    .phone-con {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0 12PX;
      background-color: #ffffff;
      width: 100%;
      height: 44PX;
      border-radius: 5PX;
      .task-box-shadow();
    }
  }

  .task-btn {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 44PX;
    display: flex;

    .preview-share {
      width: 40%;
      height: 100%;
      background-color: #909399;
      color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18PX;
    }

    .forward-again {
      flex-grow: 1;
      height: 100%;
      background-color: #57b5fe;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18PX;
      color: #FFFFFF;
    }
  }
}

img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
